<template>
  <div class="innp">
    <div class="divid" />

    <!-- <div class="header">
      <div id="yield"><span>kg/亩</span></div>
      <div class="header_box">
        <img src="@/assets/supervision/iocn41.png" alt="" />
        <span>修改目标产量</span>
      </div>
    </div> -->

    <div class="header">
      <div class="header_top">
        <div class="head_key">
          <span>{{ vartext }}</span>
          <p>kg/亩</p>
        </div>
        <div class="head_box">您的目标产量</div>
        <div class="head_top">
          <span>{{ minNum }}</span><span class="span">{{ maxNum }}</span>
        </div>
      </div>
    </div>

    <div class="middle">
      <div class="middle_top">
        <ul>
          <li class="active">智能推荐</li>
        </ul>
      </div>
      <div>
        <div class="middle_box">
          <div class="middle_fl">
            <div id="echart" />
          </div>
          <div class="middle_fr">
            <ul>
              <li>
                <span>N</span><span>{{ fertilizePlan.n ? fertilizePlan.n : "-" }}KG/亩</span>
              </li>
              <li>
                <span>P</span><span>{{ fertilizePlan.p ? fertilizePlan.p : "-" }}KG/亩</span>
              </li>
              <li>
                <span>K</span><span>{{ fertilizePlan.k ? fertilizePlan.k : "-" }}KG/亩</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="checked">
      <div class="checked_top">施肥建议</div>
      <template
        v-if="
          fertilizePlan.fertilizeCardList &&
            fertilizePlan.fertilizeCardList.length > 0
        "
      >
        <div
          v-for="(item, index) in fertilizePlan.fertilizeCardList"
          :key="index"
          class="checked_box"
        >
          <div class="checked_fl">{{ item.name }}</div>
          <div class="checked_fr">
            <ul>
              <li
                v-for="(items, indexs) in item.fertilizeCardRecordList"
                :key="indexs"
              >
                <span>{{ items.name }}</span><span>{{ items.amount }}kg/亩</span>
              </li>
            </ul>
          </div>
        </div>
      </template>
      <van-empty v-else description="暂无施肥建议..." />
    </div>

    <!-- 修改目标产量选择 -->
    <van-dialog v-model="show" title="选择目标产量" @confirm="confirm">
      <van-radio-group v-model="radio">
        <van-radio
          v-for="(item, index) in optionList"
          :key="index"
          :name="index"
        >{{ item }}</van-radio>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script>
import { cropPlan } from '@/api';
export default {
  data() {
    return {
      vartext: null,
      show: false,
      radio: 0,

      minNum: null,
      maxNum: null,
      optionList: [],
      fertilizeYieldList: [],
      fertilizePlan: {}
    };
  },
  computed: {
    cropSubId() {
      return this.$route.query.cropSubId;
      // return 74;
    }
  },
  // 页面初始化挂载dom
  mounted() {
    this.getCropPlanFn();
  },
  methods: {
    // 获取施肥方案
    async getCropPlanFn() {
      const data = {
        cropSubId: this.cropSubId
      };
      const result = await cropPlan(data);
      if (result.code == 200) {
        const list = result.data.fertilizeYieldList;
        const optionList = [];
        for (var i = 0; i < list.length; i++) {
          optionList.push(list[i].yield);
        }
        let minNum = '';
        if (list[0].yield.includes('-')) {
          minNum = list[0].yield.split('-');
          this.minNum = minNum[0];
        } else {
          minNum = list[0].yield;
          this.minNum = minNum;
        }
        let maxNum = '';
        if (list[0].yield.includes('-')) {
          maxNum = list[list.length - 1].yield.split('-');
          this.maxNum = maxNum[1];
        } else {
          maxNum = list[list.length - 1].yield;
          this.maxNum = maxNum;
        }
        this.optionList = optionList;
        this.fertilizeYieldList = list;
        this.$nextTick(() => {
          this.show = true;
        });
      }
    },
    // 选择目标产量
    confirm() {
      const radio = this.radio;
      const vartext = this.optionList[radio];
      this.vartext = vartext;
      this.fertilizePlan = this.fertilizeYieldList[radio].fertilizePlanList[0];
      this.getLoadEcharts();
    },
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById('echart'));
      const fertilizePlan = this.fertilizePlan;
      const total =
        Number(fertilizePlan.n) +
        Number(fertilizePlan.k) +
        Number(fertilizePlan.p);
      const nValue = (Number(fertilizePlan.n) / total).toFixed(2);
      const kValue = (Number(fertilizePlan.k) / total).toFixed(2);
      const pValue = (Number(fertilizePlan.p) / total).toFixed(2);
      const data = [
        { value: nValue, name: 'N', itemStyle: { color: '#FFA10B' }},
        { value: kValue, name: 'K', itemStyle: { color: '#61B2FF' }},
        { value: pValue, name: 'P', itemStyle: { color: '#FFD556' }}
      ];
      var option = {
        series: [
          {
            type: 'pie',
            radius: '100%',
            data: data,
            label: {
              normal: {
                position: 'inner',
                formatter: '{b}',
                textStyle: {
                  color: '#ffffff',
                  fontSize: 14
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    modify() {
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.innp {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.van-cell {
  border: 1px solid #333333;
  padding: 0;
  width: 80%;
  margin: 10% auto;
  padding: 10px 20px;
  border-radius: 10px;
}
.divid {
  width: 100%;
  height: 15px;
  background-color: #f8f8f8;
}
.header {
  width: 100%;
  height: 218px;
  background-color: #fff;
  position: relative;
  .imga {
    width: 238px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .imgb {
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -45px;
    margin-left: -80px;
  }

  .head_key {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 83px;
    span {
      font-size: 22px;
      font-weight: 500;
      color: #333333;
    }
    p {
      font-size: 20px;
      font-weight: 500;
      color: #333333;
    }
  }
  .head_box {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  .head_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 228px;
    margin: 0 auto;
    padding: 30px 5px 0;
    span {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ff5050;
    }
    .span {
      color: #00b578;
    }
  }

  .header_box {
    position: absolute;
    top: 15px;
    right: 15px;
    img {
      width: 15px;
      margin: 0 auto;
    }
    span {
      display: block;
      font-size: 8px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffa10b;
      text-align: center;
      padding-top: 6px;
    }
  }
}

.middle {
  background-color: #fff;
  margin-top: 18px;
  padding: 0 15px;
  .middle_top {
    padding-top: 10px;
    padding-bottom: 34px;
    ul {
      display: flex;
      align-items: center;
      li {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-right: 40px;
      }
      .active {
        color: #333333;
      }
    }
  }
  .middle_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 15px;
    .middle_fr {
      width: 165px;
      background: #ffffff;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #cccccc;
      border-bottom: 0;
      ul {
        li {
          display: flex;
          align-items: center;
          height: 35px;
          border-bottom: 1px solid #cccccc;
          span {
            font-size: 15px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
            height: 35px;
            line-height: 35px;
          }
          span:nth-child(1) {
            width: 40px;
            border-right: 1px solid #cccccc;
          }
          span:nth-child(2) {
            width: 125px;
          }
        }
      }
    }
  }

  .middle_fl {
    #echart {
      width: 112px;
      height: 112px;
      overflow: hidden;
      border-radius: 50%;
    }
    span {
      display: block;
      font-size: 13px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: center;
      padding-top: 10px;
    }
  }
}

.checked {
  background-color: #fff;
  margin-top: 5px;
  .checked_top {
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 6px 15px;
  }
  .checked_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .checked_fl {
      font-size: 0.15rem;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      padding-left: 5%;
      margin-top: -0.1rem;
      position: relative;
      width: 20%;
    }
    .checked_fl:after {
      display: block;
      content: "";
      width: 13px;
      height: 13px;
      background: #ffffff;
      opacity: 1;
      border: 1px solid #ffa10b;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      margin-left: 62%;
    }
    .checked_fr {
      padding: 15px;
      border-bottom: 1px solid #d5d5d5;
      border-left: 1px solid #d5d5d5;
      width: 78%;
      ul {
        padding: 0 15px;
        background-color: #f5f5f5;
        border-radius: 3px;
        width: 100%;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 38px;
          border-top: 1px solid #dee4ea;
          span {
            font-size: 15px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #686b73;
          }
        }
        li:nth-child(1) {
          border-top: 0;
        }
      }
    }
  }
  .checked_box:nth-child(2) {
    margin-top: 20px;
    .checked_fr {
      padding-top: 0;
    }
  }
}

::v-deep .van-radio {
  justify-content: center;
  margin: 15px 0;
}
</style>
